import styles from './search.module.css';
import React, { useState } from 'react';
import {   BorderOutlined  , CompressOutlined   } from '@ant-design/icons';
const ExpandableContent = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  return (
    <div className={styles.search}>
        <div>
         {isOpen && <div>{children}</div>}
        </div>
        
        <div className={styles.flexCenter} >
          {isOpen ? <BorderOutlined style={{fontSize:'20px'}} onClick={toggle}/> : <CompressOutlined style={{fontSize:'20px'}} onClick={toggle}/>}
          
        </div>
    </div>
  );
};

export default ExpandableContent;